﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HN_MAPII.aspx.cs" Inherits="HNQXYJ.HN_Map.HN_MAPII" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     <%--<script type="text/javascript" src="http://api.map.baidu.com/api?key=ddb44554222452c6769bfa32a8793107&v=1.1&services=true"></script>--%>     
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">
    </script>
    <link href="../CSS/Map.css" rel="stylesheet" type="text/css" />
    <link href="../CSS/MapPop.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        //js代码开始
        $(function () {
            createMap(113.661717, 34.760406); //113.661717,34.760406
            setMapEvent();
            addMapControl();


            //点击江苏省激发事件显示城市列表
            $("#list").click(function () {
                $("#cityList").css("top", "34px").css("left", "2px").show();
            });

            //点击列表右边的叉关闭城市列表
            $("#closeCityList").click(function () {
                $("#cityList").hide();
            });

            //加载河南省城市列表
            loadLeftTopCity();


            //点击河南省回到初始化的页面
            $("#henan").click(function () {
                // createMap(113.661717, 34.760406);
                var point = new BMap.Point(113.661717, 34.760406);
                map.centerAndZoom(point, 8);
                map.clearOverlays();
                getDataBoundary("河南省");
                loadLeftTopCity();
                $("#countiesList").empty();
                return false;

            });
            //终端数据可能要变化所以每隔一定时间就重新加载一次数据，
            //定时间隔加载数据
            // setInterval("loadData()", 10000)

            $("#send").click(function () {
                var phone = $("#phoneHidden").val();
                var msg = $("#sendMsg").val();
                var sendTimes = $("#sendTimes").val();
                if (msg == "" || msg.length < 3) {
                    alert("发送内容不能为空或太短");
                    return;
                }
                $.post("../BLL/TerminalAsh.ashx", { "sendaction": "sendMsg", "phone": phone, "sendMsg": msg, "sendTimes": sendTimes }, function (data, status) {
                    if (status == "success") {
                        if (data == "ok") {
                            alert("信息已经发出！");
                        }
                    }

                });

            });

        });         //js代码结束


        //创建地图函数
        function createMap(lng, lat) {
            var map = new BMap.Map("dituContent"); //在页面容器中创建一个地图
            var point = new BMap.Point(lng, lat); //定义一个中心点的坐标
          //  map.centerAndZoom(point, 9); //设定地图的中心点和坐标并将地图显示在地图容器中
            window.map = map; //将map设为全局变量
            getDataBoundary("河南省");
            map.centerAndZoom(point, 8);
            // addMarker(point, 10);
            //map.setZoom(50);

        }

        //地图事件设置函数
        function setMapEvent() {
            map.enableDragging(); // 启用地图拖拽事件
            map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
            map.enableDoubleClickZoom(); //启用地图双击放大事件
            map.enableKeyboard(); //启用键盘上下左右键移动地图
        }

        //地图控件添加函数：
        function addMapControl() {
            //向地图中添加缩放控件
            var ctrl_nav = new BMap.NavigationControl();
            map.addControl(ctrl_nav);
            //向地图中添加缩略图控件
            var ctrl_ove = new BMap.OverviewMapControl();
            map.addControl(ctrl_ove);
            //向地图中添加比例尺控件
            var ctrl_sca = new BMap.ScaleControl();
            map.addControl(ctrl_sca);
        }

        //添加预警终端的标注
        // 编写自定义函数,创建标注http://dev.baidu.com/wiki/static/map/API/examples/images/ico-1-9.png
        function addMarker(point, index) {
            var img = "";
            if (terminal[index].Statuss == "在线" && terminal[index].Category == "0") {
                img = "../images/green.png";
            } else if (terminal[index].Statuss == "离线" && terminal[index].Category == "0") {
                img = "../images/red.png";
            } else if (terminal[index].Statuss == "离线" && terminal[index].Category == "1") {
                img = "../images/icon7.gif";
            } else if (terminal[index].Statuss == "在线" && terminal[index].Category == "1") {
                img = "../images/icon6.gif";
            }
            var myIcon = new BMap.Icon(img, new BMap.Size(20, 31),
                                {
                                    anchor: new BMap.Size(10, 31), //标注的偏移，让标注点的下端指向经纬度坐标
                                    infoWindowAnchor: new BMap.Size(10, 0) //信息框的偏移  让信息框的下断点指向标注的上端
                                }
             );

            var marker = new BMap.Marker(point, { icon: myIcon });
            map.addOverlay(marker);

            //给标注添加鼠标滑过事件
            marker.addEventListener("mouseover", function () {
                //alert(mapDataArray[0]);
                var infoWindow = new BMap.InfoWindow();
                var detailInfow = '<div>所在地：' + terminal[index].TownName + '<br/>气象信息员：' + terminal[index].Leader + ' </div>'
                infoWindow.setContent(detailInfow);
                this.openInfoWindow(infoWindow, map.getCenter());
            });

            //给标注添加鼠标点击事件
            marker.addEventListener("click", function () {
                // 弹出遮罩层的信息发送框
                var phone = terminal[index].Phone;
                $("#phoneHidden").val(phone);
                var villageName = terminal[index].TownName;
                $("#villageName").val(villageName);
                ShowDiv('MyDiv', 'fade');
            });
        }

        //编写自定义函数给每个市添加一个标注 
        function addMarkerCity(point, index) {
            var myIcon = new BMap.Icon("../images/redgoyellow.png", new BMap.Size(20, 31),
                                {
                                    anchor: new BMap.Size(10, 31), //标注的偏移，让标注点的下端指向经纬度坐标
                                    infoWindowAnchor: new BMap.Size(10, 0) //信息框的偏移  让信息框的下断点指向标注的上端
                                }
             );

            var marker = new BMap.Marker(point, { icon: myIcon });
            map.addOverlay(marker);
            window.marker = marker;
            //添加鼠标滑过事件，显示统计数据
            marker.addEventListener("mouseover", function () {
                var selfCode = cities[index].SelfCode;
              
                var name = cities[index].Name;
                //alert(selfCode);
                $.post("../BLL/TerminalAsh.ashx", { "action": "GetTerminalTongJiData", "selfCode": selfCode }, function (data, status) {
                    if (status == "success") {
                        var count = $.parseJSON(data);
                        window.count = count;
                        var detailInfo = '<div><table class="tongji" > <tr><td>' + name + '</td><td>大喇叭</td><td>LED大屏</td></tr>' +
                                                       '<tr><td>总数</td><td>' + count[0] + '</td><td>' + count[3] + '</td></tr>' +
                                                       '<tr><td>在线</td><td>' + count[1] + '</td><td>' + count[4] + '</td></tr>' +
                                                       '<tr><td>离线</td><td>' + count[2] + '</td><td>' + count[5] + '</td></tr></talbe></div>';

                        var infoWindow = new BMap.InfoWindow();
                        infoWindow.setContent(detailInfo);
                        marker.openInfoWindow(infoWindow, map.getCenter()); //将marker用this代替的话，会出问题，找不到对应的this代表的对象

                    }
                });
            });

            //添加鼠标点击事件，点击某个城市将地图上原有图标去掉，加上所点击的城市的县的图标
            marker.addEventListener("click", function () {
                var lng = cities[index].Lng;
                var lat = cities[index].Lat;
                var selfCode = cities[index].SelfCode;
                var name = cities[index].Name;
                var point = new BMap.Point(lng, lat); //确定一个点              
                map.centerAndZoom(point, 10); //移动地图的同时放大
                //点击该城市标注的时候触发的事件
                map.clearOverlays(); //先清除原有的地图上的覆盖物
                getDataBoundary(name);
                loadCountyOfCityClickBiaoZhu(selfCode);

            });

        }

        //加载某个城市所辖下的县的的图标
        function loadCountyOfCityClickBiaoZhu(selfCode) {
            $.post("../BLL/County.ashx", { "action": "GetCountyList", "cityCode": selfCode }, function (data, status) {
                if (status == "success") {
                    var couty = $.parseJSON(data);
                    window.couty = couty;                   
                    for (var i = 0; i < couty.length; i++) {
                        var lng = couty[i].Lng;
                        var lat = couty[i].Lat;
                        var selfCode = couty[i].SelfCode;
                        //为每个县添加一个标注
                        var point = new BMap.Point(lng, lat); //确定一个点，为这个点添加标注
                        addMarkerCounty(point, i)
                    }
                }
            });

        }


        //当点击某个市的图标的时候为该市所辖县添加图标 2012-08-06
        function addMarkerCounty(point, index) {
            //首先清楚原有的地图上的标注
           // map.clearOverlays(); //清除原有图标(地图上的所有覆盖物)
            var myIcon = new BMap.Icon("../images/redgoyellow.png", new BMap.Size(20, 31),
                                {
                                    anchor: new BMap.Size(10, 31), //标注的偏移，让标注点的下端指向经纬度坐标
                                    infoWindowAnchor: new BMap.Size(10, 0) //信息框的偏移  让信息框的下断点指向标注的上端
                                }
             );
              var markerCounty = new BMap.Marker(point, { icon: myIcon });
              map.addOverlay(markerCounty);
              window.markerCounty = markerCounty;
              var selfCode = couty[index].SelfCode;
              var name = couty[index].Name;
              //添加鼠标滑过事件，显示对某个县的统计数据
              markerCounty.addEventListener("mouseover", function () {
                  
                 
                  
                  $.post("../BLL/TerminalAsh.ashx", { "action": "GetTerminalTongJiData", "selfCode": selfCode }, function (data, status) {
                        if (status == "success") {
                             var count = $.parseJSON(data);
                             window.count = count;
                             var detailInfo = '<div><table class="tongji" > <tr><td>' + name + '</td><td>大喇叭</td><td>LED大屏</td></tr>' +
                                                '<tr><td>总数</td><td>' + count[0] + '</td><td>' + count[3] + '</td></tr>' +
                                                '<tr><td>在线</td><td>' + count[1] + '</td><td>' + count[4] + '</td></tr>' +
                                                 '<tr><td>离线</td><td>' + count[2] + '</td><td>' + count[5] + '</td></tr></talbe></div>';

                             var infoWindow = new BMap.InfoWindow();
                            infoWindow.setContent(detailInfo);
                            markerCounty.openInfoWindow(infoWindow, map.getCenter()); //将marker用this代替的话，会出问题，找不到对应的this代表的对象
                            }
                   });
                });

                //添加对县的点击事件 加载该县的终端标注
                markerCounty.addEventListener("click", function () {
                    map.clearOverlays();
                    getDataBoundary(name);
                    map.centerAndZoom(point, 12);
                    loadDataCounty(selfCode);

                });

        }

        //弹出隐藏层
        function ShowDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = 'block';
            document.getElementById(bg_div).style.display = 'block';
            var bgdiv = document.getElementById(bg_div);
            bgdiv.style.width = document.body.scrollWidth;
            // bgdiv.style.height = $(document).height();
            $("#" + bg_div).height($(document).height());
        };
        //关闭弹出层
        function CloseDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = 'none';
            document.getElementById(bg_div).style.display = 'none';
        };

        //全屏显示
        function toFull() {
            if (window.name == "fullscreen") return;
            var a = window.open("", "fullscreen", "fullscreen=yes");
            a.location = window.location.href;
            window.opener = null;
            window.close();
        }
        //以下是左上角列表的处理程序
        //加载河南省下的城市 读取城市列表加载到左上端的隐藏框中2012-8-01
        function loadLeftTopCity() {   
            //取城市列表数据
            $.post("../BLL/City.ashx", { "action": "GetCityLists" }, function (data, status) {
                if (status == "success") {
                    var cities = $.parseJSON(data);
                    window.cities = cities;
                    $("#citiesLists").empty();
                    for (var i = 0; i < cities.length; i++) {
                        var lng = cities[i].Lng;
                        var lat = cities[i].Lat;
                        var name = cities[i].Name;
                        var selfCode = cities[i].SelfCode;
                        var a = '<a href="#" flage="city"  name=' + name + '  lng= ' + lng + ' lat=' + lat + ' selfCode=' + selfCode + ' >' + cities[i].Name + '</a>' + '     ';
                        $("#citiesLists").append(a);
                        //为每个市添加一个标注
                        var point = new BMap.Point(lng, lat); //确定一个点，为这个点添加标注
                        addMarkerCity(point, i);
                    }

                    //点击某个城市，将地图中心移动到该市，并显示该市下的县（区）列表
                    $("a[flage='city']").each(function () {
                        $(this).click(function () {
                            var lng = $(this).attr("lng");
                            var lat = $(this).attr("lat");
                            var name = $(this).attr("name");
                            var selfCode = $(this).attr("selfCode");
                            var point = new BMap.Point(lng, lat); //确定一个点
                            //map.panTo(new BMap.Point(lng, lat));
                            map.centerAndZoom(point, 10); //移动地图的同时放大
                            map.clearOverlays(); //清除原有图标
                            getDataBoundary(name);//获取点击城市的边界
                            loadCountyOfCity(selfCode); //加载县级列表
                            return false; //阻止事件冒泡

                        });
                    });
                } //end if
            });        
        }


        //点击某个城市后加载该市下的县和区等
        function loadCountyOfCity(selfCode) {
            $.post("../BLL/County.ashx", { "action": "GetCountyList", "cityCode": selfCode }, function (data, status) {
                if (status == "success") {
                    var couty = $.parseJSON(data);
                    window.couty = couty;
                    $("#countiesList").empty();
                    if (couty.length > 0) { //只有当某个城市下有县时才加载该县
                        for (var i = 0; i < couty.length; i++) {
                            var lng = couty[i].Lng;
                            var lat = couty[i].Lat;
                            var name = couty[i].Name;
                            var selfCode = couty[i].SelfCode;
                            var a = '<a href="#" flage="couty"  name=' + name + '  lng= ' + lng + ' lat=' + lat + ' selfCode=' + selfCode + ' >' + couty[i].Name + '</a>' + '     ';

                            $("#countiesList").append(a);
                            //为每个县添加一个标注
                            var point = new BMap.Point(lng, lat); //确定一个点，为这个点添加标注
                            addMarkerCounty(point, i)
                        }

                        //点击某个县将地图中心移动到该县
                        $("a[flage='couty']").each(function () {
                            $(this).click(function () {
                                var lng = $(this).attr("lng");
                                var lat = $(this).attr("lat");
                                var name = $(this).attr("name");
                                var selfCode = $(this).attr("selfCode");
                                var point = new BMap.Point(lng, lat); //确定一个点
                                // map.panTo(new BMap.Point(lng, lat));
                                map.centerAndZoom(point, 12); //移动地图的同时放大
                                map.clearOverlays(); //清除地图上的原有边界
                                getDataBoundary(name);
                                //根据各个县的权限码来加载各个县的数据
                                loadDataCounty(selfCode);
                                return false;
                            });
                        }); //
                    }
                    else {
                        //alert("该市下没有县装终端机");
                        return;
                    }
                }

            });
        }
    

        //根据某个县的权限码来加载该县的数据以及添加标注
        function loadDataCounty(selfCode) {

            $.post("../BLL/TerminalAsh.ashx", { "action": "GetTerminalListByRankLevel", "selfCode": selfCode }, function (data, status) {
                if (status == "success") {

                    var Terminal = $.parseJSON(data);
                    window.terminal = Terminal;
                    if (terminal.length > 0) {
                        for (var i = 0; i < Terminal.length; i++) {
                            var lng = terminal[i].Lng;
                            var lat = terminal[i].Lat;
                            var points = new BMap.Point(lng, lat);
                            addMarker(points, i);

                        }
                    }
                    else {
                        return;
                    }
                }
                else {
                    alert("数据加载失败");
                }
            });
        }


        //通过传入的区域名称画出该区域的行政边界
        function getDataBoundary(distictName) {
            var bdary = new BMap.Boundary();
            bdary.get(distictName, function (rs) {       //获取行政区域
                //  map.clearOverlays();        //清除地图覆盖物       
                var count = rs.boundaries.length; //行政区域的点有多少个
                for (var i = 0; i < count; i++) {
                    var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 3, strokeColor: "#0000FF" }); //建立多边形覆盖物
                    ply.setFillColor("#00FF00");
                    ply.setFillOpacity(0.1);
                    map.addOverlay(ply);  //添加覆盖物
                    // map.setViewport(ply.getPath());    //调整视野         
                }
            });
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="rtbg">
                <span id="list" style="cursor: pointer;">河南省
                    <img alt="" src="../images/icon1.gif" align="absmiddle" /></span><img src="../images/icon2.gif"
                        align="absmiddle" />终端在线<img src="../images/icon3.gif" align="absmiddle" />终端离线
                        <img src="../images/icon6.gif" align="absmiddle" />LED在线
                        <img src="../images/icon7.gif" align="absmiddle" />LED离线
            </td>
        </tr>
        <tr>
            <td>
                <div id="dituContent" style="width: 100%; height: 680px;">
                </div>
            </td>
        </tr>
    </table>
    <%--页面顶部结束--%>
    <%--城市列表显示框开始--%>
    <div id="cityList" style="display: none; position: absolute; z-index: 100;">
        <table width="300" height="200" border="0" cellspacing="0" cellpadding="0" class="borbg">
            <tr>
                <td class="cslist" height="27">
                    <span id="henan"><a href="#">河南省</a> </span>
                    <img id="closeCityList" src="../images/icon5.gif" align="absmiddle">
                </td>
            </tr>
             <tr>
                <td height="27" class="lb_mc">
                    <div id="citiesLists">
                    </div>
                    <hr />
                </td>
            </tr>
            <tr>
                <td height="27" class="lb_mc">
                    <div id="countiesList">                      
                    </div>
                </td>
            </tr>
            <tr>
                <td class="lb_mc" valign="top">
                    <div id="terminalList">
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <%--城市列表显示框结束--%>
    <%--弹出遮罩层和发送信息框 开始--%>
    <div id="fade" class="black_overlay">
    </div>
    <div id="MyDiv" class="white_content">
        <%--      <div style="text-align: right; cursor: default; height: 40px;">
           <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
        </div>--%>
        <table width="448" border="0" cellspacing="0" cellpadding="0" align="center" class="bg">
            <tr>
                <td height="40" class="tpt">
                    <img src="../images/tpt.gif" alt="" />
                </td>
            </tr>
            <tr>
                <td height="25" align="center">
                    <img src="../images/tline.gif" alt="" />
                </td>
            </tr>
            <tr>
                <td class="nr">
                    村名：<input name="村名" id="villageName" type="text" class="bor" style="width: 335px;" />
                </td>
            </tr>
            <tr>
                <td class="nr">
                    发送内容：<span style="font-size: 12px; color: #FF0000">（字数不超过350个)</span><br>
                    <%--<textarea  id="sendMsg" name="textarea" rows="" cols="" class="bor2" ></textarea>--%>
                    <asp:TextBox ID="sendMsg" runat="server" class="bor2" TextMode="MultiLine" MaxLength="350"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="nr">
                    发送次数：<%--<input id="sendTimes" name="sendTimes" type="text" size="3" class="bor" />--%>
                    <asp:TextBox ID="sendTimes" runat="server" size="3" class="bor" Text="1"></asp:TextBox>
                    次
                </td>
            </tr>
            <tr>
                <td height="60" align="center">
                    <img src="../images/tqx.gif" alt="" onclick="CloseDiv('MyDiv','fade')" />&nbsp;&nbsp;&nbsp;&nbsp;<img
                        id="send" src="../images/tfs.gif" alt="" />
                </td>
            </tr>
            <tr>
                <td height="20">
                </td>
            </tr>
        </table>
        <input type="hidden" id="phoneHidden" />
    </div>
    <%--弹出遮罩层和发送信息框 结束--%>
    </form>
</body>
</html>
